<!--广播活动公告-->
<template>
    <div class="official_news">
      <swiper class="swiper-container news" ref="mySwiper" :options="swiperOption">
        <swiper-slide class="swiper-slide" v-for="item in newsList" :key="item.newId">
          <a :href="item.newId"><p><em>{{item.newType}}</em>{{item.newTitle}}</p></a>
        </swiper-slide>
      </swiper>
    </div>
</template>

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: 'home',
    props: ['newsList'],
    data () {
      return {
        swiperOption: {
          notNextTick: true,
          autoplay: 3000,
          effect: 'slide',
          grabCursor: true,
          setWrapperSize: true,
          mousewheelControl: true,
          observeParents: true,
          loop: true,
          autoplayDisableOnInteraction: false,
          direction: 'vertical'
        }
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    computed: {
      swiper () {
        return this.$refs.mySwiper.swiper
      }
    }
  }
</script>


<style>
.official_news{
  background: #fff;
  height: 43px;
  overflow: hidden;
  background:#fff url(../../../../static/img/sound.png)10px center no-repeat;
  background-size: 18px 18px;
  width: 320px;
}
.news{
  margin-left: 38px;
}
.news a{
  display: block;
  height: 43px;
  font-size: 14px;
}
.news a em{
  color:red;
  padding-right:5px;
}
.news a p{
  padding-right: 20px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  line-height: 43px;
}
</style>
